<template>
  <div class="com-container"  ref="editor_ref">
    <div id="editorElem" style="text-align: left">
    </div>
  </div>
</template>
<script>
import E from 'wangeditor'
import figure from '@/api/data/figure'

export default {
  props: ['figureId'],
  data () {
    return {
      editorContent: '',
      editor: {},
      height: 0
    }
  },
  methods: {
    async getFigureSummary () {
      if(!this.figureId){
        return
      }
      const res =await figure.getFigureSummary(this.figureId)
      //设置历史人物总结
      this.editor.txt.append(res.data.figureSummary.summary)
      //将编辑器设置为只读
      this.editor.disable()
    },
    getContent: function () {
      return this.editorContent
    },
  },
  mounted () {
    let editor = new E('#editorElem')
    editor.config.onchange = html => {
      this.editorContent = html
    }
    editor.config.zIndex = 100
    editor.config.placeholder = ''
    //过滤掉复制文本中自带的样式,默认开启
    editor.config.pasteFilterStyle = false
    editor.config.height = this.$refs.editor_ref.offsetHeight
    editor.create()
    if(this.figureId){
      this.getFigureSummary()
    }
    this.editor = editor
  }
}
</script>
<style scoped>
#editorElem {
  height: 100%;
  width: 100%;
}

/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}

table th {
  border-bottom: 2px solid #ccc;
  /* text-align: left; */
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

pre code {
  display: block;
}

/* ul ol 样式 */
ul,
ol {
  margin: 10px 0 10px 20px;
}

/*.w-e-text-container /deep/{*/
/*  background-color: #333333;*/
/*}*/
/*.w-e-toolbar /deep/{*/
/*  display: none;*/
/*}*/
</style>
